<template>
  <div id="index">
    <!-- 首页轮播图 -->
    <!-- <div > -->
    <van-swipe class="box" :autoplay="3000">
      <van-swipe-item v-for="(image, index) in swiper" :key="index">
        <img class="swiperimg" :src="image.banner_img" />
      </van-swipe-item>
    </van-swipe>
    <!-- </div> -->
    <!-- 三个小格子 -->
    <div id="posit" style="display:flex;">
      <div @click="tsk" class="position">
        <img class="positimg" src="..//assets/1.png" alt />
        <p>特色课</p>
      </div>
      <div @click="ydyfd" class="position">
        <img class="positimg" src="..//assets/2.png" alt />
        <p>一对一辅导</p>
      </div>
      <div class="position">
        <img class="positimg" src="..//assets/3.png" alt />
        <p>学习日历</p>
      </div>
    </div>
    <!-- 名师阵容 -->
    <ul class="teacher">
      <li style="overflow:hidden;" v-for="(item, index) in teacher" :key="index">
        <!-- 名称 -->
        <h2>{{item.channel_info.name}}</h2>
        <!-- 信息 -->
        <div class="navs" v-for="(items, index) in item.list" :key="index">
          <!-- 循环图片 -->
          <div
            style="display:flex;"
            class="for"
            v-for="(ite, index) in items.teachers_list"
            :key="index"
            @click="userapp(ite.id)"
          >
            <!-- <div class="fors"> -->
            <img class="forimg" :src="ite.teacher_avatar" alt />
            <div class="nav">
              <h3>{{ite.teacher_name}}</h3>
              <p>{{items.title}}</p>
            </div>
            <!-- </div> -->
          </div>
        </div>
      </li>
    </ul>
    <!-- 3,4数据 -->
    <div class="sansi">
      <div v-for="(item, index) in app" :key="index">
        <h2>{{item.channel_info.name}}</h2>
        <!-- 数据 -->
        <div
          class="sansis"
          v-for="(ite, index) in item.list"
          :key="index"
          @click="userapp(ite.teacher_id)"
        >
          <img :src="ite.teacher_avatar" alt />
          <h3>{{ite.teacher_name}}</h3>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { zxtHomeList, zxtbanner } from "../util/http.js";
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [],
  components: {},
  data() {
    return {
      swiper: [],
      teacher: [],
      app: []
    };
  },
  computed: {},
  watch: {},
  methods: {
    //首页数据
    async zxtHomeList() {
      const res = await zxtHomeList();
      var app = res.splice([2], 2);
      this.teacher = res;
      this.app = app;
      // console.log(res);
    },
    // 轮播图
    async zxtbanner() {
      const res = await zxtbanner();
      //   console.log(res);
      this.swiper = res;
    },
    userapp(id) {
      // console.log(id);
      this.$router.push({
        path: "/xiangqing",
        query: {
          id: id
        }
      });
    },
    ydyfd(){
      this.$router.push('/ydyfd')
    },
    tsk(){
      this.$router.push('/course')
    }
  },
  beforeCreate() {},
  created() {
    // 轮播图
    this.zxtbanner();
    //名师数据
    this.zxtHomeList();
  },
  beforeMount() {},
  mounted() {}
};
</script> 
<style scoped>
#index {
  background: #f0f2f5;
  height: 100%;
}
/* img{
  margin-right: 0;
} */
.box {
  width: 100%;
  height: 230px;
  /* background: #000; */
  overflow: hidden;
}
.swiperimg {
  width: 100%;
  height: 230px;
  background: #000;
}
#posit {
  position: absolute;
  top: 210px;
}
.position {
  width: 100px;
  margin-left: 20px;
  height: 100px;
  background: white;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}
.position > img {
  width: 20px;
}
.teacher {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  margin-top: 80px;
}
.navs {
  margin-left: 2%;
  width: 95%;
  /* height: 200px; */
  /* background: skyblue; */
}
.for {
  background: white;
  margin-top: 50px;
  overflow: hidden;
}
.navs {
  /* background: red; */
  margin-top: 50px;
}
.sansi {
  margin-top: 50px;
  width: 100%;
  /* background: rebeccapurple; */
  overflow: hidden;
}
.sansis {
  margin-top: 50px;
  overflow: hidden;
  width: 100%;
  display: flex;
}
.sansis > img {
  width: 30%;
  border-radius: 50%;
}
.forimg {
  width: 30%;
  border-radius: 50%;
}
.nav {
  width: 70%;
}
</style>
